<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>pwa | eric_cyr&#39;s blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="一、背景从2018年到现在，作为号称下一代web应用模型的PWA，逐渐成为了一个各大前端厂商争先恐后进行涉足，布局的一个新的技术， 其主要的对标物Native app，作为现在最主流的mobile端应用，它的安全，性能，用户体验的确明显领先于其他互联网载体，但是原生App始终有一些缺点，比如  昂贵开发成本  软件上线，版本更新都需要发布到不同的商店，并通过审核   有些APP你可能使用频率特别少">
<meta property="og:type" content="article">
<meta property="og:title" content="pwa">
<meta property="og:url" content="http://yoursite.com/2020/06/14/pwa/index.html">
<meta property="og:site_name" content="eric_cyr&#39;s blog">
<meta property="og:description" content="一、背景从2018年到现在，作为号称下一代web应用模型的PWA，逐渐成为了一个各大前端厂商争先恐后进行涉足，布局的一个新的技术， 其主要的对标物Native app，作为现在最主流的mobile端应用，它的安全，性能，用户体验的确明显领先于其他互联网载体，但是原生App始终有一些缺点，比如  昂贵开发成本  软件上线，版本更新都需要发布到不同的商店，并通过审核   有些APP你可能使用频率特别少">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-06-14T13:59:22.000Z">
<meta property="article:modified_time" content="2020-06-14T13:59:27.293Z">
<meta property="article:author" content="eric_cyr">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="eric_cyr&#39;s blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 4.2.1"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">eric_cyr&#39;s blog</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">分享是程序员的第一美德</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-pwa" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2020/06/14/pwa/" class="article-date">
  <time datetime="2020-06-14T13:59:22.000Z" itemprop="datePublished">2020-06-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      pwa
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>一、背景<br>从2018年到现在，作为号称下一代web应用模型的PWA，逐渐成为了一个各大前端厂商争先恐后进行涉足，布局的一个新的技术， 其主要的对标物Native app，作为现在最主流的mobile端应用，它的安全，性能，用户体验的确明显领先于其他互联网载体，但是原生App始终有一些缺点，比如</p>
<ol>
<li><p>昂贵开发成本</p>
</li>
<li><p>软件上线，版本更新都需要发布到不同的商店，并通过审核</p>
</li>
</ol>
<p>有些APP你可能使用频率特别少，但是你还是不得不去商店中下载庞大安装包，或者可能一段时间不使用以后，随着版本的更新，你也不得不去重新更新并安装</p>
<p>PWA技术的作为web应用，其天生优势能很好的解决以上的问题。</p>
<p>二. 什么是PWA<br>PWA是Progressive Web App的英文缩写， 翻译过来就是渐进式增强WEB应用， 是Google 在2016年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。</p>
<p>引用官方介绍：</p>
<p>Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging - Feel like a natural app on the device, with an immersive user experience.<br>即是：</p>
<ol>
<li>可靠——即时加载，即使在不确定的网络条件下也不会受到影响。<br>当用户从主屏幕启动时，service work可以立即加载渐进式Web应用程序，完全不受网络环境的影响。service work就像一个客户端代理，它控制缓存以及如何响应资源请求逻辑，通过预缓存关键资源，可以消除对网络的依赖，确保为用户提供即时可靠的体验。</li>
</ol>
<p>可靠<br>2. 快速<br>据统计，如果站点加载时间超过 3s，53% 的用户会放弃等待。页面展现之后，用户期望有平滑的体验，过渡动画和快速响应。</p>
<p>快速<br>3. 沉浸式体验—— 感觉就像设备上的原生应用程序，具有沉浸式的用户体验。<br>渐进式Web应用程序可以安装并在用户的主屏幕上，无需从应用程序商店下载安装。他们提供了一个沉浸式的全屏幕体验，甚至可以重新与用户接触的Web推送通知。</p>
<p>沉浸式体验<br>Web应用程序中，可以通过manifest.json控制应用程序的显示方式和启动方式，指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向，甚至可以指定是否显示浏览器Chrome。<br>根据官方的介绍，不难看出，pwa的目标直指原生app，那接下来我们就来了解下PWA到底是个怎么样的何方神圣。</p>
<p>三. 核心功能<br>PWA并不是单指某一项技术，你更可以把它理解成是一种思想和概念，目的就是对标原生app，将Web网站通过一系列的Web技术去优化它，提升其安全性，性能，流畅性，用户体验等各方面指标，最后达到用户就像在用app一样的感觉。</p>
<p>PWA中包含的核心功能及特性如下：<br>Web App Manifest<br>Service Worker<br>Cache API 缓存<br>Push&amp;Notification 推送与通知<br>Background Sync 后台同步<br>响应式设计<br>四. PWA如何弥补和原生App的差距<br>性能差异<br>PWA使用app Shell架构模型</p>
<ol>
<li>快速加载</li>
<li>尽可能使用较少的数据</li>
<li>使用本机缓存中的静态资产</li>
<li>将内容与导航分离开来</li>
<li>检索和显示特定页面的内容（HTML、JSON 等）</li>
<li>缓存动态内容 App Shell 可保证 UI 的本地化以及从 API 动态加载内容，但同时不影响网络的可链接性和可检测性。 用户下次访问您的应用时，应用会自动显示最新版本。无需在使用前下载新版本。<br>为了保证首屏的加载，在内容请求完成之前，可以优先保证 App Shell 的渲染，做到和 Native App 一样的体验，App Shell 是 PWA 界面展现所需的最小资源。<br>无法离线使用</li>
</ol>
<p>Service Worker + HTTPS +Cache Api + indexedDB 等一系列web技术实现离线加载和缓存<br>数据更新</p>
<p>Background Sync 后台同步技术<br>无法实现推送</p>
<p>Push&amp;Notification 实现推送与通知<br>无法添加到桌面</p>
<p>通过manifest.json文件配置，使得可以直接添加到手机的桌面上。<br>天生优势：</p>
<ol>
<li>无需安装，无需下载，只要你输入网址访问一次，然后将其添加到设备桌面就可以持续使用。</li>
<li>发布不需要提交到app商店审核</li>
<li>更新迭代版本不需要审核，不需要重新发布审核</li>
<li>现有的web网页都能通过改进成为PWA， 能很快的转型，上线，实现业务、获取流量</li>
<li>不需要开发Android和IOS两套不同的版本</li>
</ol>
<p>劣势：</p>
<ol>
<li>游览器对技术支持还不够全面， 不是每一款游览器都能100%的支持所有PWA</li>
<li>需要通过第三方库才能调用底层硬件（如摄像头）</li>
<li>PWA现在还没那么火，国内一些手机生产上在Android系统上做了手脚，似乎屏蔽了PWA, 但是相信当PWA火起来以后，这个问题就不会是问题</li>
</ol>
<p>五. PWA的发展趋势<br>2016年， PWA在google正式落地，基于 Chromium 的浏览器 Chrome 和 Opera 已经完全支持 PWA 了<br>随着 iOS 11.3 的发布，iOS正式开始支持PWA<br>Windows Edge 支持PWA</p>
<p>随着越来越多的游览器大厂，相继的对PWA做出了支持和优化，想必PWA的时代即将到来</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2020/06/14/pwa/" data-id="ckbq7rmln0007ig1lbpnv1ka9" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2020/06/14/foo-bar-%E7%9A%84%E6%95%85%E4%BA%8B/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          foo bar 的故事
        
      </div>
    </a>
  
  
    <a href="/2020/06/14/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">背包问题总结</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/06/">June 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">May 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2020/06/22/vue-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/">vue 组件通信</a>
          </li>
        
          <li>
            <a href="/2020/06/14/njuoj-%E9%80%92%E5%BD%92%E6%9F%A5%E8%AF%A2%E5%AD%90%E5%AD%97%E7%AC%A6%E4%B8%B2/">njuoj 递归查询子字符串</a>
          </li>
        
          <li>
            <a href="/2020/06/14/foo-bar-%E7%9A%84%E6%95%85%E4%BA%8B/">foo bar 的故事</a>
          </li>
        
          <li>
            <a href="/2020/06/14/pwa/">pwa</a>
          </li>
        
          <li>
            <a href="/2020/06/14/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/">背包问题总结</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 eric_cyr<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>